@extends('admin.layouts.app')
@section('product','active')


@section('content')
                <div id="picbox" style="display:none;position:fixed;right:130px;top:130px;width:;height:300px;z-index:99999;background:#999"></div>
	
	 <div class="container-fluid">
            <div class="block-header">
                <h2>
                    商品管理
                </h2>
            </div>
            <!-- Basic Table -->
            <div class="row clearfix">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="card">
                        <div class="header">
                            <h2>
                                商品列表
                            </h2>
                            <div class="align-left" style="margin-top:10px;">
                                 <a href="{{route('product.create')}}" class="btn btn-primary btn-xs" >
                                        <i class="material-icons">add</i>
                                        <span>添加商品</span>
                                </a>
                            </div>
                        </div>

                        <div class="body table-bordered">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>商品名称</th> 
                                        <th>价格/编号/主分类</th> 
                                        <th>标签</th> 
                                        <th>商品操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($products as $product)

                                        <tr>
                                            <td scope="row" style="text-align: center;line-height: 68px;">{{$loop->index+1}}</td>
                                            <td id="{{$product->id}}">
                                                
                                                <div>
                                                    <img class="big_pic pull-left" src="{{asset('productpics/').'/'.$product->pro_img}}" width="68" height="68" />
                                                    <span  class="mt-2" style="vertical-align: top;" data-toggle="tooltip" data-placement="bottom" title="{{$product->pro_name}}">
                                                        {{str_limit($product->pro_name, $limit = 40, $end = '...')}}
                                                    </span><br>

                                                 <span class="m-0 p-0 badge text-left badge-info">{!! $product->type['type_name'] !!}</span>

                                                 @if($product->is_promote && $product->promote_end_time > time()) 
                                                    <span class="m-0 p-0 badge text-left badge-danger bg-red">正在促销</span>
                                                 @endif
                                                </div> 

                                            </td>
                                            <td >
                                                价格: {{$product->pro_prices}} <br>
                                                编号: {{$product->pro_code}}  <br>
                                                分类: {!! $product->category->name !!}<br>
                                            </td>
                                            <td>
                                                <div class="switch">
                                                    <label>精品:<input type="checkbox"  @if($product->is_best) checked @endif>
                                                    <span class="lever"></span></label>
                                                </div>

                                                <div class="switch">
                                                    <label>热门:<input type="checkbox"  @if($product->is_hot) checked @endif>
                                                    <span class="lever"></span></label>
                                                </div>

                                                <div class="switch">
                                                    <label>新品:<input type="checkbox" @if($product->is_new) checked @endif>
                                                    <span class="lever"></span></label>
                                                </div>
                                            </td>
                                            <td>
    
                                                <a href="{{ route('product.number',$product->id) }}" class="btn bg-blue btn-xs" data-toggle="tooltip" data-placement="top" title="库存 (@if($product->number->sum('product_number') != 0) {{$product->number->sum('product_number')}} @else {{$product->pro_stock}}@endif)"  id="num">
                                                    <i class="material-icons">confirmation_number</i>
                                                    <span>货品</span>
                                                </a><br>
                                                <a href="{{ route('product.edit',$product->pro_code) }}" class="btn bg-green btn-xs">
                                                    <i class="material-icons">mode_edit</i>
                                                    <span>编辑</span>
                                                </a><br>
                                               <form style="display: inline" action="{{ route('product.destroy',$product->pro_code) }}" id="del{{$product->pro_code}}" method="post">
                                                    {{csrf_field()}}
                                                    {{method_field('DELETE')}}
                                                    <button type="button" onclick="confirm_del({{$product->pro_code}})" class="btn bg-red btn-xs ">
                                                     <i class="material-icons">delete</i>
                                                        <span>删除</span>
                                                       
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>

                                    @endforeach

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- #END# Basic Table -->
     </div>


@endsection

@section('js-script')
	{{-- expr --}}
    <!-- JQuery DataTable Css -->
    <link href="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css') }}" rel="stylesheet">

	<!-- Jquery Core Js -->
    <script src="{{ asset('admin/plugins/jquery/jquery.min.js') }}"></script>

    <!-- Bootstrap Core Js -->
    <script src="{{ asset('admin/plugins/bootstrap/js/bootstrap.js') }}"></script>

    <!-- Select Plugin Js -->
    <script src="{{ asset('admin/plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>

    <!-- Slimscroll Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-slimscroll/jquery.slimscroll.js') }}"></script>

    <!-- Waves Effect Plugin Js -->
    <script src="{{ asset('admin/plugins/node-waves/waves.js') }}"></script>

   <!-- Jquery DataTable Plugin Js -->
    <script src="{{ asset('admin/plugins/jquery-datatable/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/jszip.min.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/pdfmake.min.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/vfs_fonts.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('admin/plugins/jquery-datatable/extensions/export/buttons.print.min.js') }}"></script>

    <!-- Custom Js -->
    <script src="{{ asset('admin/js/admin.js') }}"></script>

    <script src="{{ asset('admin/js/pages/tables/jquery-datatable.js')}}"></script>
    <script src="{{ asset('admin/js/pages/ui/tooltips-popovers.js')}}"></script>

    <!-- Demo Js -->
    <script src="{{ asset('admin/js/demo.js') }}"></script> 
    <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip();

        })
        $(".big_pic").hover(function(){
        	$('#picbox').show();
            $('#picbox').append('<img src="'+$(this).attr("src")+'" style="width:100%;height:300px;"/>')
            console.log($(this).attr("src"));
        },function(){
        	$("#picbox").hide();
            $("#picbox > img").remove();
        })
        function confirm_del(id)
        {
            var r = window.confirm("确定要删除吗?");
            console.log(id);
            if(r == true)
            {
                $("#del"+id).submit();
            }
        }
    </script>
@endsection